<style scoped>
  .content .w980{
    padding-top: 0;
  }
  .fr div.list-tips.breadcrumb{
    margin-bottom: 0;
  }
  .nav-path{
    position: relative;
  }
  .nav-path ol{
    width: 100%;
    height: 36px;
  }
  .nav-path button.add-hsp-btn{
    position: absolute;
    top: 0;
    right: 0;
  }
  .nav-path ol li a{
    color: #444;
  }
  .nav-path ol li:last-child{
    color: #00CB8F;
  }
  .nav-path ol li.li-last{
    color: #00CB8F;
  }

  /*返回上一级*/
  .return-prev{
    color: #0DC78A;
    text-decoration: none;
    float: right;
  }
  /*机构列表*/
  .list-tips{
    padding: 0;
    height: 36px;
    line-height: 36px;
    background: #F5F5F4  url(../../assets/img/list_tips.png) no-repeat 20px center;
    background-size: 4px 20px;
  }
  .list-tips span{
    float: left;
    font-size: 16px;
    height: 36px;
    line-height: 36px;
    margin-left: 36px;
    text-align: left;
  }
  .list-tips span.default-span{
    color: #6C6C6C;
    font-size: 14px;
    padding: 0 15px;
    cursor: pointer;
  }
  .list-tips span.active-span{
    color: #fff;
    background-color: #00C484;
  }
  .list-tips button.close span{
    font-size: 18px;
    margin: 2px 10px 0 0;
    text-align: left;
  }
  .org-list .list-tips button{
    float: right;
    width: 118px;
    height: 36px;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    background-color: #00A9FD;
    font-size: 16px;
    line-height: 36px;
    margin-right: 20px;
    /*margin-top: calc(50%-0.18rem);*/
    margin-top: 6px;
    outline: none;
  }
  .org-list .list-opera .form-inline label{
    margin: 0 10px 0 23px;
    font-size: 12px;
    color: #666460;
    font-weight: 400;
  }
  .org-list .list-opera .form-inline button{
    width: 98px;
    height: 32px;
    display: inline-block;
    border-radius: 16px;
  }
  .list-opera{
    margin: 10px 0 20px 0;
  }
  .list-opera .form-inline .clear-research{
    margin-left: 15px;
    height: 32px;
  }
  .list-content{
      height: 600px;
      overflow: auto;
  }
  .list-content .table{
    table-layout: fixed;
  }
  .list-content table th {
      text-align: center;
      line-height: 36px;
      height: 36px;
      font-weight: normal;
      background-color: #F8F8F7;
  }
  .list-content table tr:nth-child(odd){
    background-color: #fff;
  }
  .list-content table tr:nth-child(even){
    background-color: #F6FBF8;
  }
  .list-content table td {
      line-height: 40px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .list-content table tr td:nth-child(1) {
      color: #333
  }
  .list-content table tr td:nth-child(2),.list-content table tr td:nth-child(3) {
      color: #333
  }
  .list-content table tr td a.glyphicon{
    display: inline-block;
    padding: 0 0 0 20px;
    height: 16px;
    font-size: 12px;
    text-align: right;
    margin-right: 5px;
    text-decoration: none;
    color: #444;
    background-repeat: no-repeat!important;
    background-position: left center!important;
  }
  .list-content table tr td a:first-child{
    background: url(../../assets/img/edit.png);
    background-size: 14px;
  }
  .list-content table tr td .glyphicon:hover {
      color: #1dc499;
      cursor: pointer;
  }
  .list-content table tr td a:nth-child(1){
    background: url(../../assets/img/watch.png);
    background-size: 17px 12px;
  }
  .list-content table tr td a:nth-child(2){
    background: url(../../assets/img/dele4.png);
    background-size: 14px;
  }

  /*模态框基本设置*/
  .modal-dialog .breadcrumb{
    margin-bottom: 0;
  }
  #add-org-cover .modal-body{
    height: 500px;
    overflow: auto;
    padding: 0 15px;
  }
  /*模态框*/
  .modal-dialog{
    width: 80%;
    height: 300px;
    border-top: 0;
  }
  .modal-body .form-group{
    display: block;
    margin-bottom: 18px;
    margin-top: 18px;
  }
  .modal-body .increase-team-per select,.modal-body .increase-team-per input{
    width: 60%;
    display: inline-block;
  }
  .modal-body .form-group-foot{
    text-align: center;
  }
  .modal-body .form-group label{
    width: 27%;
    text-align: right;
  }
  .modal-body .form-inline .form-control{
    width: 48%;
    text-align: left;
    text-indent: 10px;
    margin-left: 30px;
  }

  /*删除提示*/
  #delCoverTips .modal-dialog .modal-content{
    width: 48%;
    margin: 0 auto;
  }
  .del-tips{
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
  }
  .del-tips span{
    color: #f00;
    padding: 0 3px;
  }
  .modal-footer{
    text-align: center;
    padding: 0;
  }
  .modal-footer .form-group.clear-margin-bot{
    margin-bottom: 0;
    padding: 10px;
  }
  .modal-footer .btn{
    outline: none;
  }
  .modal-footer .btn.btn-primary{
    background-color: #00C782;
  }
  .modal-footer .btn-opera .form-group{
    text-align: center;
  }

  /*编辑服务项目*/
  .form-group{
    display: block;
    margin-bottom: 18px;
  }
  .form-group label{
    text-align: right;
    width: 30%;
    display: inline-block;
    height: 34px;
    line-height: 34px;
    font-weight: 400;
  }
  .form-group .form-control{
    width: 240px;
  }
  .exp-mark{
    color: red;
    height: 100%;
    line-height: 100%;
    font-size: 14px;
    margin-right: 5px;
    display: inline-block;
  }

  span.error{
    color: #f00;
  }

  .form-group.clear-research{
    float: right;
  }

  .form-group button.search-btn{
    border-radius: 16px;
    width: 130px;
    height: 36px;
    color: #FFF;
  }
</style>

<template>
    <div class="index clearafter">
        <!-- 头部组件 -->
        <header-component></header-component>
        <div class="content flex">
        <!-- 侧部导航组件 -->
        <div class="w220">
            <aside-component></aside-component>
        </div>
        <!-- 右部内容区 -->
        <div class="w980 flex_full">
          <!-- 路径导航 -->
            <nav class="nav-path">
                <ol class="breadcrumb">
                  <li class="li-last">广告管理</li>
                  <!-- <a href="#" class="return-prev" onclick="javascript:history.back(-1);">返回上一级</a> -->
                </ol>
            </nav>
            <div class="list-tips breadcrumb">
              <span>广告列表</span>
              <button class="fr default ok add-hsp-btn" onclick="javascript:location.href='./advertisementManage_Add.html'"> + 添加广告</button>
            </div>
            <!-- 查询相关操作 -->
            <div class="list-opera">
              <form class="form-inline">
                <div class="form-group">
                    <label class="control-label col-md-3">产品名称</label>
                    <div class="col-md-4">
                        <select class="form-control valid" name="expertFlag" v-model="productName" @change="getAdvertiseList">
                            <option v-for="item in getAppNames" value="{{item.code}}">{{item.name}}</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3">广告位置</label>
                    <div class="col-md-4">
                        <select class="form-control valid" name="expertFlag" v-model="advertiPosi" @change="getAdvertiseList">
                            <option v-for="item in dictionary.adverPosition" value="{{item.key}}">{{item.text}}</option>
                        </select>
                    </div>
                </div>
                <!-- <div class="clear-research form-group">
                  <button type="submit" class="ok search-btn" @click.stop.prevent="researchEvent">搜 索</button>
                </div> -->
              </form>
            </div>
            <!-- 服务列表内容 -->
            <div class="list-content">
              <table class="table table-striped">
                <table class="table table-hover">
                      <thead>
                          <tr>
                              <th class="col-md-2">广告位置</th>
                              <th class="col-md-2">广告名称</th>
                              <th class="col-md-1">链接类型</th>
                              <th class="col-md-2">效期_开始</th>
                              <th class="col-md-2">效期_结束</th>
                              <!-- <th class="col-md-1">是否默认</th> -->
                              <th class="col-md-1">排序</th>
                              <th class="col-md-2">操作</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr v-for="lists in serverData">
                              <td title="{{lists.positionText}}">{{lists.positionText}}</td>
                              <td title="{{lists.name}}">{{lists.name}}</td>
                              <td>{{lists.linkTypeText}}</td>
                              <td title="{{lists.valid_startDate}}">{{lists.valid_startDate != null ? lists.valid_startDate.substr(0,11) : ''}}</td>
                              <td title="{{lists.valid_endDate}}">{{lists.valid_endDate != null ? lists.valid_endDate.substr(0,11) : ''}}</td>
                              <!-- <td>{{lists.defaultFlag == '1' ? '是' : '否'}}</td> -->
                              <td>{{lists.orderNo}}</td>
                              <td>
                                <a class="glyphicon" @click="watchProduct(lists)">查看</a>
                                <a class="glyphicon" @click="deleteProduct(lists)">删除</a>
                              </td>
                          </tr>
                          <tr class="no-data" v-if="isData">
                            <td colspan="8">暂无查询记录</td>
                          </tr>
                      </tbody>
                  </table>
              </table>
            </div>
          </div>

          <!-- 删除提示 -->
          <div id="delCoverTips" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title">机构删除</h4>
                </div>
                <div class="modal-body">
                  <p class="del-tips">您确定要删除此"<span v-text="delAdverName"></span>"吗？</p>
                </div>
                <div class="modal-footer">
                  <div class="form-group clear-margin-bot del-cover">
                    <button type="button" class="save-btn" @click.stop.prevent="confirmDeletePdu">确认</button>
                    <button type="button" class="cancel-btn" data-dismiss="modal">取消</button>
                  </div>
                </div>
              </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
          </div><!-- /.modal -->
        </div><!-- 内容区 -->
        </div>
    </div>
</template>

<script>
  import 'assets/reset.css';
  import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css';
  import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js';

  import Header from 'components/module-head.vue';
  import Asider from 'components/menu-list.vue';
  import Public from 'assets/public.js'

  export default {
    data () {
      return {
        //字典请求
        dictionary: {
          adverPosition: {}//广告位置base_bannerPostion
        },
        //获取APP名称
        getAppNames: {},
        //查询条件
        productName: 'coms.xiangtan.doctor_pc',//产品名称
        advertiPosi: '0301',//广告位置

        serverData: {},
        //机构管理
        isOrgManage: true,
        //查看机构--添加机构(导航树)
        isWatchOrg: false,
        isAddOrg: false,
        //查看机构--添加机构(内容列表)
        isCheckOrg: false,

        //要删除的广告名称-id
        delAdverName: '',
        advertiseId: '',

        //是否有记录
        isData: false
      }
    },
    events: {},
    watch: {
      'serverData': 'isWatchServerData'
    },
    filters: {},
    ready () {
      var that = this;
      this.isData = (this.serverData.length == '' || null || 'undefined') ? true:false;
      //字典请求
      this.dictionaryRequest();
      //获取APP名称列表
      this.getAppNameList();
      //获取广告列表
      this.getAdvertiseList();
    },
    components: {
      //头部组件
      'header-component': Header,
      //侧部导航组件
      'aside-component': Asider
    },
    methods: {

      //监听数据变化显示是否有记录
      isWatchServerData () {
        if(this.serverData.length == '' || this.serverData.length == null || this.serverData.length == 'undefined'){
          this.isData = true;
        }else{
          this.isData = false;
        };
      },

      //字典请求
      dictionaryRequest () {
        var that = this;
        var arr = ["base.dictionary.base_bannerPostion","base.dictionary.base_hyperLink"];
        $.when(Public.commonajax('coms.multipleDictionaryService','findDic','['+JSON.stringify(arr)+']')).done(function(res){
          $.each(res.body,function(index,ele){
            if(ele.dicId == arr[0]){
              that.dictionary.adverPosition = ele.items;
            }
            if(ele.dicId == arr[1]){
              that.dictionary.linkType = ele.items;
            }
          });
        });
      },

      //获取APP名称列表
      getAppNameList () {
        var that = this;
        $.when(Public.commonajax('base.tenantProductsService','queryProductTenantByPcode','['+false+']')).done((res)=>{
          if(res.code == 200){that.getAppNames = res.body}
        });
      },

      //获取广告列表
      getAdvertiseList () {
        $.when(Public.commonajax('base.productBannerService','queryProductBannerInfo','["'+this.productName+'","'+this.advertiPosi+'"]')).done((res)=>{
          if(res.code == 200){
            this.serverData = res.body;
          }
        });
      },

      //搜索
      researchEvent () {
        this.getAdvertiseList();
      },

      //清空基本信息
      clearBaseMsgEvent () {
        //
      },

      // 查看广告
      watchProduct (lists) {
        location.href = './advertisementManage_Add.html?'+lists.id+'&'+lists.picture;
      },


      //删除
      deleteProduct (lists) {
        this.delAdverName = lists.name;
        this.advertiseId = lists.id;
        $('#delCoverTips').modal('show');
      },

      //确认--删除
      confirmDeletePdu () {
        $.when(Public.commonajax('base.productBannerService','delete','["'+this.advertiseId+'"]')).done((res)=>{
            $('#delCoverTips').modal('hide');
            if(res.code == 200){
              this.getAdvertiseList();
              Public.ajaxPrompt('删除成功！');
            }else{
              Public.ajaxPrompt(res.msg);
            };
        });
      }

    }//methods
  }



</script>
